<template>
<header 
class="flex fixed top-0 left-0 z-[9999]  w-full h-[64px] items-center pl-[10px] pr-[10px] bg-gray-200  border-[1px] border-solid border-zinc-200 "
>
  <div class="text-lg ">编辑文章</div>
  <div class="flex grow"></div>
  <div class="text-sm text-gray-400 mr-4">
    文章将自动保存在草稿箱
  </div>
  <div class="flex gap-2">
    <Button>草稿箱</Button>
    <Button type="primary">更新</Button>
  </div>
</header> 
<!-- 编辑器区域 -->
<div class="flex w-full h-[800px] overflow-hidden m-3 mt-[64px]">
  <BlogEditor @save="handleSave"/>
</div>

<!-- 文章元信息预览 -->
<footer class="preview-meta flex h-[46px]">
  <div class="meta-item">
    <strong>字数统计:</strong> {{ wordCount }} 字
  </div>
  <div class="meta-item">
    <strong>行数统计:</strong> {{ rowCount }}
  </div>
</footer>
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import BlogEditor from '@/components/BlogEditor.vue';
import { ref } from 'vue';
import { myCard } from '@/const/style';


const handleSave = (contentObj:any)=>{
  console.log("contentObj:",contentObj)
}

const wordCount = ref(0)
const rowCount = ref(0)

</script>